<template>
  <div>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i> 已分班级学生
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="container-left" style="width: 15%">
          <el-tree
            :data="treeData.data"
            :props="{ children: 'children', label: 'label' }"
            node-key="id"
            @node-click="handleNodeClick"
          />
        </div>
        <div class="container-right">
          <div class="handle-box">
            <el-form
              :inline="true"
              :model="form"
              class="demo-form-inline"
              label-width="20px"
            >
              <!--              <el-form-item label-width="20px">-->
              <!--                <el-select-->
              <!--                  v-model="query.collegeId"-->
              <!--                  filterable-->
              <!--                  placeholder="请选择学院"-->
              <!--                  @focus="getAllCollege()"-->
              <!--                >-->
              <!--                  <el-option-->
              <!--                    v-for="item in options"-->
              <!--                    :key="item.sid"-->
              <!--                    :label="item.collegeName"-->
              <!--                    :value="item.sid"-->
              <!--                  >-->
              <!--                  </el-option>-->
              <!--                </el-select>-->
              <!--              </el-form-item>-->
              <el-form-item>
                <el-select
                  v-model="query.majorId"
                  filterable
                  placeholder="请选择专业"
                  @focus="getMajor()"
                >
                  <el-option
                      v-for="item in optionsMajors"
                      :key="item.sid"
                      :label="item.majorName"
                      :value="item.sid"
                      :disabled="item.adviserId==queryAdviserId.adviserId ? false:true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="query1.className1"
                  filterable
                  placeholder="请选择班级"
                  @focus="getClassList()"
                  style="width: 80%"
                >
                  <el-option
                      v-for="item in classList"
                      :key="item.className"
                      :label="item.className"
                      :value="item.className"
                      :disabled="item.adviserId==queryAdviserId.adviserId ? false:true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <!-- <div class="block"> -->
                <el-date-picker
                  v-model="query.allocateDate"
                  type="date"
                  placeholder="选择一个日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  :shortcuts="shortcuts"
                >
                </el-date-picker>
                <!-- </div> -->
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="query.studentName"
                  placeholder="姓名"
                  class="inline-input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                  >搜索</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  class="btn"
                  type="primary"
                  icon="el-icon-upload"
                  @click="handleExport"
                  >导出</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-delete"
                  @click="handleAlloc()"
                  >批量移出班级</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
          >
            <!--            @row-click="clickRow"-->

            <el-table-column type="selection" />
            <el-table-column
              :show-overflow-tooltip="true"
              :prop="item.prop"
              :label="item.label"
              v-for="item in props"
              :key="item.prop"
            >
            </el-table-column>
            <el-table-column>
              <el-table-column
                label="操作"
                width="220px"
                align="center"
                fixed="right"
              >
                <template #default="scope">
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row.sid)"
                    >移除班级</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    class="red"
                    @click="handleClass( scope.$index,scope.row.majorId,scope.row.sid)"
                    >微调班级</el-button
                  >
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :currentPage="query.pageNum"
              :page-sizes="[10, 20, 40]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择班级 -->
    <el-dialog
      title="选择新班级"
      v-model="dialogVisible"
      width="25.5%"
      :before-close="handleClose"
    >
      <el-table :data="classList" border style="width: 100%">
        <!-- <el-table-column prop="id" label="" width="120">
				</el-table-column> -->
        <el-table-column prop="className" label="班级名" />
        <el-table-column prop="classCode" label="班级序号" />
        <!-- <el-table-column prop="adviser" label="辅导员" /> -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="checkClass(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import request from "../../utils/request";

export default {
  name: "DividedIntoClasses",

  methods: {
    clickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
  },
  setup() {
    const router = useRouter();
    const props = [
      {label: "学号", prop: "studentId"},
      {label: "学生姓名", prop: "studentName"},
      {label: "身份证号", prop: "idCardNo"},
      {label: "性别", prop: "gender"},
      {label: "民族", prop: "nation"},
      // {label: "年级", prop: "grade"},
      {label: "学院名称", prop: "collegeName"},
      {label: "专业名", prop: "majorName"},
      {label: "班级名称", prop: "className"},
      {label: "加入班级时间", prop: "allocateDate"},
      // {label: "班级序号", prop: "classCode"},
    ];

    const treeData = reactive({
      data: [],
    });
    const queryAdviserId = reactive({
      adviserId: localStorage.getItem("sid")
    })
    request.get("/college/ThreeTree",
        {
          params: queryAdviserId,
        }).then((res) => {
      treeData.data = res.data;
    });

    const query = reactive({
      collegeId: "",
      majorId: "",
      className: "",
      studentName: "",
      allocateDate: "",
      adviserId: "",
      pageNum: 1,
      pageSize: 10,
    });
    const query1 = reactive({
      className1: "",
    });

    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const getData = () => {
      tableData.value = [];
      query.adviserId = localStorage.getItem("sid")
      request
          .get("/student/queryStudentClass", {
            params: query,
          })
          .then((res) => {
            if (res.code != 0) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
            pageTotal.value = res.data.total;
            query1.className1 = "";
            query.collegeId = "";
            query.majorId = "";
            query.allocateDate = "";
            query.studentName = "";
          }
        });
    };

    //     query.collegeId +
    //   "majorId=" +
    //  query.majorId +
    //   "className=" +
    //   query.className +
    //   "allocateDate= " +
    //   query.allocateDate
    //   "
    const handleExport = () => {
      query.adviserId = localStorage.getItem("sid")
      window.location.href =
          "http://localhost:9998/student/statisticsExport?adviserId=" +
          query.adviserId +
          " &majorId=" +
          query.majorId +
          "&className=" +
          query1.className1 +
          "&allocateDate=" +
          query.allocateDate +
          "";
    };

    // 查询操作
    const handleSearch = () => {
      query.className = query1.className1;
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    // 单个数据移除
    const handleDelete = (index, sid) => {
      // tableSelection.idList = [];
      // tableSelection.idList[0] = sid;
      handleAlloc();
    };

    //学院下拉框
    const options = ref([]);
    const getAllCollege = () => {
      console.log(query.collegeId);
      request.get("/college/getAllCollege").then((res) => {
        options.value = res.data;
        getMajor();
      });
    };
    //专业下拉框

    const optionsMajors = ref([]);
    const getMajor = () => {
      request
        .get("/major/queryList", {
          params: { collegeId: query.collegeId, type: 1 },
        })
        .then((res) => {
          optionsMajors.value = res.data;
        });
    };
    //班级下拉框
    const classList = ref([]);
    const getClassList = () => {
      request
        .get("/class/byMajorIdOrCollegeId", {
          params: { majorId: query.majorId },
        })
        .then((res) => {
          classList.value = res.data;
        });
    };
    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addNew");
    };

    const handleEdit = (sid) => {
      router.push({ path: "/admin/addNew", query: { id: sid } });
    };
    //多选
    const tableSelection = reactive({
      idList: [],
      classId: "",
    });
    //选择列表框
    const handleSelectionChange = (val) => {
      tableSelection.idList = [];
      for (var i in val) {
        tableSelection.idList.push(val[i].sid);
      }
    };
    //树状触发事件
    const handleNodeClick = (data) => {
      if (!data.children) {
        query.className = data.label;
        getData();
      }
    };
    //移除学生
    const handleAlloc = () => {
      if (tableSelection.idList.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定移除吗？", "提示", {
        type: "warning",
      }).then(() => {
        request.post("/student/updateClassId", tableSelection).then((res) => {
          if (res.code === null) {
            ElMessage.success("移除成功");
            getData();
          } else {
            tableSelection.idList = [];
            ElMessage.error("移除失败");
          }
        });
      });
    };
    const dialogVisible = ref(false);
    const handleClass = (index, majorId, sid) => {
      // tableSelection.idList[0] = sid;
      // console.log(sid)
      dialogVisible.value = true;
      query.majorId = majorId;
      getClassList();
      // request.get("/class/byMajorIdOrCollegeId?majorId=" + val).then((res) => {
      //   classList.value = res.data;
      // });
    };
    const checkClass = (row) => {
      tableSelection.classId = row.sid;
      if (tableSelection.idList.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定微调班级吗？", "提示", {
        type: "warning",
      }).then(() => {
        request
          .post("/student/updateStudentClass", tableSelection)
          .then((res) => {
            if (res.code === "0") {
              ElMessage.success("调班成功");
              dialogVisible.value = false;
              getData();
            } else {
              tableSelection.idList = [];
              ElMessage.error(res.msg);
            }
          });
      });
      console.log(row);
    };

    return {
      props,
      query,
      query1,
      options,
      optionsMajors,
      treeData,
      tableData,
      pageTotal,
      tableSelection,
      classList,
      dialogVisible,
      queryAdviserId,
      checkClass,
      handleClass,
      getClassList,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      handleEdit,
      handleSelectionChange,
      handleNodeClick,
      handleAlloc,
      getAllCollege,
      getMajor,
      handleExport,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.container-left {
  width: 20%;
  padding-right: 20px;
}

.container-right {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.btn {
  display: flex;
  text-align: left;
  padding-bottom: 10px;
}

.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
